<template>
  <div class="area-item">
    <transition name="slide-left">
      <dl v-show="showItem===0" class="area">
        <dt class="a-name">{{ list[0].title }}</dt>
        <dd>
          <CarList :run="showItem===0" :left-run="leftRun" :car-list="list[0].carList" @end="onEnd" />
        </dd>
      </dl>
    </transition>
    <transition name="slide-left">
      <dl v-show="showItem===1" class="area">
        <dt class="a-name">{{ list[1].title }}</dt>
        <dd>
          <CarList :run="showItem===1" :left-run="leftRun" :car-list="list[1].carList" @end="onEnd" />
        </dd>
      </dl>
    </transition>
  </div>
</template>

<script>
import CarList from './CarList.vue'
export default {
  components: {
    CarList
  },
  props: {
    d: {
      type: Object,
      default: () => ({})
    },
    leftRun: Boolean
  },
  data () {
    return {
      list: { 0: {}, 1: {} },
      showItem: 0
    }
  },
  watch: {
    d () {
      this.anime()
      this.bindData()
    }
  },
  methods: {
    anime () {
      this.showItem = this.showItem === 0 ? 1 : 0
    },
    // 上下翻页结束，准备显示下一个仓库
    onEnd () {
      // this.anime()
      // this.nextData()
      this.$emit('end')
    },
    bindData () {
      this.list[this.showItem] = this.d
    }
  }
}
</script>
